<script setup lang="ts">
import { computed } from 'vue';
import type { Component } from 'vue';
import { $t } from '@/locales';
import { loginModuleRecord } from '@/constants/app';
import PwdLogin from './modules/pwd-login.vue';
import CodeLogin from './modules/code-login.vue';
import Register from './modules/register.vue';
import ResetPwd from './modules/reset-pwd.vue';
import BindWechat from './modules/bind-wechat.vue';

interface Props {
  /** The login module */
  module?: UnionKey.LoginModule;
}

const props = defineProps<Props>();

interface LoginModule {
  label: string;
  component: Component;
}

const moduleMap: Record<UnionKey.LoginModule, LoginModule> = {
  'pwd-login': { label: loginModuleRecord['pwd-login'], component: PwdLogin },
  'code-login': { label: loginModuleRecord['code-login'], component: CodeLogin },
  register: { label: loginModuleRecord.register, component: Register },
  'reset-pwd': { label: loginModuleRecord['reset-pwd'], component: ResetPwd },
  'bind-wechat': { label: loginModuleRecord['bind-wechat'], component: BindWechat }
};

const activeModule = computed(() => moduleMap[props.module || 'pwd-login']);

</script>

<template>
  <div class="h-full w-full">
    <WaveBg />
    <div style="position: absolute; right: 200px">
      <div style="margin-top: 120px">
        <img style="margin: 0 auto" src="@/assets/imgs/pic_login_logo.png" alt="">
      </div>
      <div class="form-wrapper">
        <div class="title">账号登录</div>
        <div class="content">
          <component :is="activeModule.component" />
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.form-wrapper {
  background-image: url("@/assets/imgs/bg_form_login.png");
  width: 448px;
  height: 524px;
  margin-top: 86px;
  .title {
    font-family: PingFangSC, PingFang SC;
    font-weight: 600;
    font-size: 26px;
    color: #EEEEEE;
    line-height: 37px;
    font-style: normal;
    text-align: center;
    padding: 60px 0 70px 0;
  }
  .content {
    margin: 0 50px;
  }
}
.main-title {
  font-family: DOUYINSANSBOLD, DOUYINSANSBOLD;
  font-weight: normal;
  font-size: 36px;
  color: #FFFFFF;
  line-height: 43px;
  letter-spacing: 1px;
  text-shadow: 0px 1px 6px rgba(119,169,255,0.5);
  text-align: left;
  font-style: normal;
}
</style>
